<template>
  <div>
    <DataHead />
    <a-card class="mt-4" :loading="table.loading">
      <ul class="grid sm:grid-cols-4 lg:grid-cols-6 gap-6" v-if="table.data.length > 0">
        <li v-for="item in table.data">
          <a-card>
            <template #cover>
              <XImage
                style="object-fit: contain"
                :src="`${item.imgSrc}?=${Math.random()}`"
                :height="200"
              ></XImage>
            </template>
            <a-card-meta :description="item.category" :title="item.themeName"></a-card-meta>
            <template #actions>
              <a-button type="text" @click="edit(item.themeId)">
                <EditOutlined />
              </a-button>
              <a-button type="text" @click="editCanvas(item)">
                <BgColorsOutlined />
              </a-button>
              <XConfirm @confirm="remove(item.themeId)">
                <a-button type="text" danger>
                  <DeleteOutlined />
                </a-button>
              </XConfirm>
            </template>
          </a-card>
        </li>
      </ul>
      <a-empty v-else />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { list, edit, remove } from '../data/curd';
import { displayCanvas, query, table } from '../data/data';
import { form } from '../data/form';
import { useArrayFilter } from '@vueuse/core';

import DataHead from './data-head.vue';

const { t } = useI18n();
import type { LcdTheme } from '@/api/modules/lcd/theme';
/* 行事件 */

const editCanvas = (item: LcdTheme) => {
  displayCanvas.value = true;
  form.value = item;
};
</script>

<style lang="scss" scoped></style>
